import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Item {
    id: playerControls
    signal back()
    function changeTitle() {
        var row = myModel.getCurrentIndex()
        titleText.text = myModel.get(row,myModel.TitleRole)
    }

    state:"close"
    states:[
        State{
            name:"open"
            PropertyChanges { target: playerControls; opacity:1}
            PropertyChanges {target: playerControls;visible:true}
        },
        State{
            name:"close"
            PropertyChanges{target:playerControls;opacity:0}
            PropertyChanges {target: playerControls;visible:false}
        }
    ]
    transitions: [
        Transition {
            from: "open";to: "close"
            SequentialAnimation{
                NumberAnimation {
                    target:playerControls
                    property: "opacity"
                    duration: 200
                    to:0
                    easing.type: Easing.InOutQuad
                }
                PropertyAnimation{
                    target:playerControls
                    property: "visible"
                    to:false
                }
            }
        },
        Transition {
            from: "close";to: "open"
            SequentialAnimation{
                PropertyAnimation{
                    target:playerControls
                    property: "visible"
                    to:true
                }
                NumberAnimation {
                    target: playerControls
                    property: "opacity"
                    duration: 200
                    to:1
                    easing.type: Easing.InOutQuad
                }
            }
        }
    ]
    BorderImage {
        id: name
        source: "images/playpage_background.jpg"
        width: playerControls.width
        height: playerControls.height
        border.left: 0
        border.top: 0
        border.right: 0
        border.bottom: 0
    }
    Column {
        id: controlsColumn
        width: playerControls.width
        height: playerControls.height
        Row {
            id: topRow
            width: controlsColumn.width
            height: controlsColumn.height * 0.1
            Button {
                id: backButton
                style:buttonStyle
                width:53
                height:53
                iconSource: "qrc:images/actionbar_back.png"
                onClicked: {
                    playerControls.back()
                }
            }
            Text {
                id: titleText
                width: topRow.width * 0.8
                height: topRow.height
                text: '标题'
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
        Disc{
            id: centerDisc
            width: controlsColumn.width
            height: controlsColumn.width
        }
        Row {
            id: durationRow
            width: controlsColumn.width
            spacing: 5
            ControlsPositionSlider {
                id: slider
                width: durationRow.width * 0.8
            }
            Label {
                id: durationLabel
                text: "0:00/0:00"
                width: durationRow.width * 0.2
            }
        }
        Row {
            id: buttonRow
            width: controlsColumn.width
            Rectangle{
                width:(buttonRow.width-53*3)/2
                height:53
                opacity: 0
            }
            Button {
                id: previousButton
                iconSource: "qrc:images/note_rdi_btn_pre.png"
                onClicked: {
                    myModel.previous()
                }
                style:buttonStyle
            }
            Button {
                id: playButton
                property string playSource: "qrc:images/note_rdi_btn_play.png"
                property string pauseSource: "qrc:images/note_rdi_btn_pause.png"
                iconSource: {
                    source: playerControlsModel.isPlay(
                                ) ? pauseSource : playSource
                }

                onClicked: {
                    playerControlsModel.playClicked()
                }

                style: buttonStyle
            }
            Button {
                id: nextButton
                iconSource: "qrc:images/note_rdi_btn_next.png"
                onClicked: {
                    myModel.next()
                }

                style: buttonStyle
            }
            //            Button{
            //                id:muteButton
            //                property string muteSource:"qrc:images/volume_mute.png"
            //                property string soundSource:"qrc:images/volume_sound.png"
            //                iconSource:"qrc:images/recording_song_volume.png"
            //                onClicked:{
            //                    playerControlsModel.muteClicked();
            //                }
            //            }
            //            Slider{
            //                id:volumeSlider
            //                maximumValue: 100
            //                minimumValue: 0
            //                value:playerControlsModel.volume()
            //                onValueChanged:{
            //                    playerControlsModel.setVolume(value);
            //                }
            //            }
        }
    }

    Connections {
        target: playerControlsModel
        onStateChanged: {
            var isPlay = playerControlsModel.isPlay()
            playButton.iconSource =  isPlay? playButton.pauseSource : playButton.playSource
            centerDisc.state = isPlay?"play":"pause";
        }
        //        onChangeVolume:{
        //            volumeSlider.value = volume;
        //        }
        //        onChangeMuting:{
        //            muteButton.iconSource = muting?muteButton.muteSource:muteButton.soundSource;
        //        }
        onChangeDurationInfo: durationLabel.text = tStr
    }
    Connections {
        target: myModel
        onPlayListChanged: changeTitle()
    }
    Component {
        id: buttonStyle
        ButtonStyle {
            background: Rectangle {
                width:53
                height:53
                implicitWidth: 25
                implicitHeight: 25
                opacity: 0
            }
        }
    }
}
